<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="float: right">
        <a-button type="primary" style="margin-bottom: 0px" @click="onEdit" icon="plus">新增</a-button>
      </div>
      <a-divider />
      <a-table ref="table" size="default" row-key="id" :columns="columns" :data-source="loadData" :pagination="false">
        <span slot="action" slot-scope="text, item">
          <a-button type="link" @click="onEdit(item.id)" size="small">编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="link" @click="onConfirmStatus('is_delete', item.id)" size="small">删除</a-button>
        </span>
      </a-table>
    </a-card>
    <a-modal
      title="退货地址编辑"
      @cancel="onClose"
      @ok="onSave"
      okText="保存"
      :destroyOnClose="true"
      :visible="visible"
    >
      <a-row v-if="loading" style="text-align: center"><a-spin /></a-row>
      <template v-else>
        <a-form action="" method="post" :form="form">
          <a-form-item :hidden="true">
            <a-input v-decorator="['id']" type="number" :step="1" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名" hasFeedback>
            <a-input
              placeholder="收货人姓名"
              v-decorator="['name', { rules: [{ required: true, message: '填写收货人姓名' }] }]"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话" hasFeedback>
            <a-input
              placeholder="收货人电话"
              v-decorator="['mobile', { rules: [{ required: true, message: '填写收货人电话' }] }]"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收货地址" hasFeedback>
            <a-input
              placeholder="收货地址"
              v-decorator="['address', { rules: [{ required: true, message: '填写收货地址' }] }]"
              type="text"
              :step="1"
            />
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { List, Edit, Save, Del } from '@/api/setting/refundAddress'
import { STable } from '@/components'
import pick from 'lodash.pick'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '联系电话',
    dataIndex: 'mobile',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'RefundAddress',
  components: {
    STable,
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      form: this.$form.createForm(this),
      columns: columns,
      loading: false,
      visible: false,
      refund: {},
      loadData: [],
    }
  },
  created() {
    this.getList()
  },
  watch: {
    refund(value) {
      this.updateData()
    },
  },
  methods: {
    getList(parameter) {
      this.loadData = null
      return List(parameter).then((res) => {
        this.loadData = res.data.list
      })
    },
    onEdit(id) {
      this.visible = true
      this.loading = true
      this.selectSize = []
      Edit({ id: id }).then((res) => {
        this.refund = res.data.model ? res.data.model : {}
        this.loading = false
      })
    },
    /**
     * 渲染form表单
     */
    updateData() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.refund, ['id', 'address', 'mobile', 'name']))
      })
    },
    onSave(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$message.loading({ content: '提交中', key: 'updatable' })
          Save(values).then((res) => {
            if (res.code === 0) {
              this.$message.success({ content: res.msg, key: 'updatable' })
              this.$nextTick(() => {
                this.visible = false
                this.getList()
              })
            } else {
              this.$message.error({ content: res.msg, key: 'updatable' })
            }
          })
        } else {
          console.log(err)
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },
    onClose() {
      this.visible = false
      this.loading = false
      this.refund = {}
    },
    onConfirmStatus(type, id) {
      var that = this
      this.$confirm({
        content: '是否确认删除',
        onOk() {
          that.updateStatus({ id: id })
        },
      })
    },
    updateStatus(q) {
      Del(q).then((res) => {
        if (res.code === 0) {
          this.getList()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
</style>
